<template>
	<view class="class-list-wrapper">
		<view class="content-wrapper">
			<view class="pic-wrapper" v-for="item in classList" @click="gopreview(item._id)">
				<image class="pic" :src="item.smallPicurl" mode="aspectFill"></image>
			</view>
		</view>
		<view class="loadingLayout">
			<uni-load-more :status="status"></uni-load-more>
		</view>
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,onReachBottom,onShareAppMessage,onShareTimeline
	} from '@dcloudio/uni-app'
	import {
		apiGetWallList,apiUserWallList
	} from '@/api/index.js'

	//数据是否加载完毕  more/loading/noMore
	const status = ref('loading')
	const gopreview = (id) => {
		uni.navigateTo({
			url: `/pages/preview/preview?id=${id}`
		})
	}

	let queryObj = {
		id:'',
		page:1,
		total:0,
		name:'',
	}
	onLoad((e) => {
		if(e.type) queryObj.type = e.type;
		if(e.id) queryObj.id = e.id;	
		queryObj.name = e.name
		uni.setNavigationBarTitle({
			title: e.name,
		});
		getList()
	})

	const classList = ref([])
	const getList = async () => {
		let res = {}
		if(queryObj.id) {
			 res = await apiGetWallList({
				classid: queryObj.id,
				pageNum:queryObj.page,
				pageSize:18,
			})
		}else if(queryObj.type){
			res = await apiUserWallList({
				type: queryObj.type,
				pageNum:queryObj.page,
				pageSize:18,
			})
		}
		classList.value = [...classList.value,...res.data]
		uni.setStorageSync('classList',classList.value)
		queryObj.total = res.total
		if(classList.value.length < 18){
			status.value = 'noMore'
		}
	}

//触底加载
onReachBottom(()=>{
	if((queryObj.total == classList.value.length)|| classList.value.length <18 ){
		status.value = 'noMore'
		return
	}
	queryObj.page++
	getList()
})

//分享给好友
onShareAppMessage((e)=>{
	return {
		title:"咸虾米壁纸-"+queryObj.name,
		path:"/pages/classList/classList?id="+queryObj.id+"&name="+queryObj.name
	}
})


//分享朋友圈
onShareTimeline(()=>{
	return {
		title:"咸虾米壁纸-"+queryObj.name,
		query:"id="+queryObj.id+"&name="+queryObj.name
	}
})

</script>

<style lang="scss" scoped>
	.class-list-wrapper {
		width: 100%;
		.box{
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 5rpx;
		}
		.content-wrapper {
			padding: 0 5rpx;
			width: 100%;
			margin: 0 auto;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 5rpx;
			.pic-wrapper {
				width: 100%;
				height: 340rpx;

				.pic {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>